<template>
  <div>
    <a-card title="基本信息" :bordered="false">
      <basicInfo ref="basicInfo"/>
    </a-card>
    <a-card title="物品信息" :bordered="false">
      <a-table
        rowKey="id"
        :columns="columns"
        :dataSource="table.data"
        :pagination="false">
        <template slot="salePrice" slot-scope="text, record">
          <a-input
            @blur="handleInputChange(record.id, 0, $event)"
            addon-before="￥"
            :maxLength="4"
            :defaultValue="text"
            style="width: 100px; text-align: center;"/>
        </template>
        <template slot="saleAmount" slot-scope="text, record">
          <a-input
            @blur="handleInputChange(record.id, 1, $event)"
            :addon-after="record.unit"
            :maxLength="4"
            :defaultValue="text"
            style="width: 100px; text-align: center;"/>
        </template>
        <template slot="totalPrice" slot-scope="text, record">
          <span style="color: red">{{ record.price * record.amount }} 元</span>
        </template>
        <template slot="operation" slot-scope="text, record">
          <span>
            <a-popconfirm title="是否要删除此行？" @confirm="handleRemove(record.id)">
              <a>删除</a>
            </a-popconfirm>
          </span>
        </template>
      </a-table>
      <a-button style="width: 100%; margin-top: 16px;" type="dashed" icon="plus" @click="handleAdd">新增物品</a-button>
    </a-card>
    <a-card title="销售备注" :bordered="false">
      <a-textarea
        v-model="saleRemark"
        placeholder="请备注...."
        :auto-size="{ minRows: 4, maxRows: 5 }"
      />
    </a-card>
    <footer-tool-bar>
      <a-button type="primary" @click="nextStep" :loading="buttonLoading">下一步</a-button>
    </footer-tool-bar>
    <a-modal
      :visible="modal.visible"
      title="选择物品"
      width="850px"
      @ok="handleModalOk"
      @cancel="handleModalCancel">
      <a-alert showIcon style="margin-bottom: 10px">
        <template slot="message">
          <span style="margin-right: 12px">已选择: <a style="font-weight: 600">{{ modal.selectedRowKeys.length }}</a>项</span>
          <a style="margin-left: 20px" @click="clearSelected" v-if="modal.selectedRowKeys.length > 0">清空</a>
        </template>
      </a-alert>
      <a-table
        rowKey="id"
        :columns="modalColumns"
        :dataSource="modal.data"
        :pagination="false"
        :rowSelection="{ selectedRowKeys: modal.selectedRowKeys, onChange: handleModalTableSelectChange }">
      </a-table>
    </a-modal>
  </div>
</template>

<script>
import basicInfo from './basicInfo'
import footerToolBar from './footerToolbar'
import cloneDeep from 'lodash.clonedeep'
import { stuffList } from '@/api/sale'
import storage from 'store'

export default {
  name: 'SaleStep1',
  components: { basicInfo, footerToolBar },
  computed: {
    columns () {
      return [
        {
          title: '物品编号',
          dataIndex: 'code',
          align: 'center'
        },
        {
          title: '物品名',
          dataIndex: 'name',
          align: 'center'
        },
        {
          title: '单位',
          dataIndex: 'unit',
          align: 'center'
        },
        {
          title: '单价',
          dataIndex: 'price',
          align: 'center',
          scopedSlots: { customRender: 'salePrice' }
        },
        {
          title: '数量',
          dataIndex: 'amount',
          align: 'center',
          scopedSlots: { customRender: 'saleAmount' }
        },
        {
          title: '总计',
          scopedSlots: { customRender: 'totalPrice' },
          align: 'center'
        },
        {
          title: '操作',
          align: 'center',
          scopedSlots: { customRender: 'operation' }
        }
      ]
    },
    modalColumns () {
      return [
        {
          title: '物品编码',
          dataIndex: 'code',
          align: 'center'
        },
        {
          title: '物品名',
          dataIndex: 'name',
          align: 'center'
        },
        {
          title: '分类',
          dataIndex: 'type',
          align: 'center'
        },
        {
          title: '单位',
          dataIndex: 'unit',
          align: 'center'
        },
        {
          title: '采购价',
          dataIndex: 'price',
          align: 'center'
        },
        {
          title: '库存',
          dataIndex: 'amount',
          align: 'center'
        }
      ]
    }
  },
  data () {
    return {
      table: {
        data: []
      },
      saleRemark: '',
      buttonLoading: false,
      modal: {
        visible: false,
        data: [],
        selectedRowKeys: []
      }
    }
  },
  created () {
    this.getStuffList()
  },
  mounted () {
    const saleDetail = storage.get('saleDetail')
    if (saleDetail) {
      this.table.data = cloneDeep(saleDetail.data)
      this.saleRemark = cloneDeep(saleDetail.saleRemark)

      delete saleDetail.saleRemark
      delete saleDetail.data

      this.$refs.basicInfo.form.structure.setFieldsValue(saleDetail)
    }
  },
  methods: {
    nextStep () {
      this.buttonLoading = true
      this.$refs.basicInfo.form.structure.validateFields((err, values) => {
        if (!err) {
          if (this.table.data.length === 0) {
            this.$message.error('请进行添加商品 !')
            this.buttonLoading = false
            return
          }
          values.data = this.table.data
          values.saleRemark = this.saleRemark
          this.$store.commit('saleDetail', values)
          this.$emit('nextStep')
          this.buttonLoading = false
        } else {
          this.buttonLoading = false
        }
      })
    },
    getStuffList () {
      const _this = this
      stuffList()
      .then(res => {
        _this.modal.data = res.data.list
      })
    },
    handleAdd () {
      this.modal.visible = true
    },
    handleRemove (id) {
      const deleteIndex = this.table.data.findIndex(item => item.id === id)
      this.table.data.splice(deleteIndex, 1)
    },
    handleModalOk () {
      // 将选中的item 放进去
      if (this.modal.selectedRowKeys.length > 0) {
        const arr = cloneDeep(this.modal.data.filter(item => this.modal.selectedRowKeys.includes(item.id)))
        this.table.data = this.table.data.concat(arr).filter((item, index, arr) => {
          return arr.findIndex(e => e.id === item.id) === index
        })
      }
      // 关掉 modal
      this.handleModalCancel()
    },
    handleModalCancel () {
      this.clearSelected()
      this.modal.visible = false
    },
    handleModalTableSelectChange (selectedRowKeys) {
      this.modal.selectedRowKeys = selectedRowKeys
    },
    clearSelected () {
      this.handleModalTableSelectChange([])
    },
    handleInputChange (id, type, e) {
      const updateIndex = this.table.data.findIndex(item => item.id === id)
      if (type === 0) {
        this.table.data[updateIndex].price = e.target.value
      } else {
        this.table.data[updateIndex].amount = e.target.value
      }
    }
  }
}
</script>

<style lang="less" scoped>
.ant-card {
  margin-bottom: 10px;
}
/deep/ .ant-input-group-addon {
  padding: 0 6px
}
/deep/ .ant-input {
  padding: 4px 4px;
}
/deep/ .ant-table-tbody > tr > td {
  padding: 12px 10px;
}
</style>
